import { useState } from 'react'
import './App.css'
import{ Demo1} from './demo1';
// import { ExcaliEditor } from './components/excalidraw'
import { Tabs } from './components/Tab'
import { DemoTest } from './components/test';
function App() {
  const [curTab, setTab ] = useState('imgEditor')
  const tabs = [ 
    {title:'imgEditor'},
    {title:'excalidraw'},
    {title:'tldraw'},
    {title:'test'}
  ]

  function onTab(v, i) {
    setTab(v.title)
  }
  const MainContent =()=>{ 
    switch (curTab) {
      case 'imgEditor':
        return <Demo1></Demo1>

        case 'excalidraw':
          // return <ExcaliEditor/>
  
       case 'test':
        
       return <DemoTest></DemoTest>
    
      default:
        return <></>
    }
  }

  return (
    <>
      <Tabs tabs={tabs} onTabChange={onTab}></Tabs>
     
        { <MainContent></MainContent>}
      
      
    </>
  )
}

export default App
